<template>
  <div style="margin: 5px;">
    <div>
        <div v-html="Data.Title" ></div>
    </div>

    <el-row>
      <el-col v-if="canEdit==true" :span="24">
        <div style="margin: 5px;margin-top:15px">
          <el-divider content-position="center">编辑段落</el-divider>
          <el-card class="box-card" style="margin-top:20px">
            <EditorComponent v-model="Data.Title" v-bind:Html="Data.Title"/>

            <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import TBaseQuestion from "./ts/TBaseQuestion";
import ParagraphSubject, { ParagraphSelOption } from "./ts/ParagraphSubject";
import { QuestionTypes } from "./ts//QuestionDataTypes";
import EditorComponent from "./EditorComponent.vue";

@Component({
  components: { EditorComponent }
})
export default class ParagraphComponent extends TBaseQuestion<
  ParagraphSelOption,
  ParagraphSubject
> {
  $name: string = "ParagraphComponent";

  CheckedValues: Array<string> = [];

  constructor() {
    super(ParagraphSelOption, ParagraphSubject);
    this.Data.QuestionType = QuestionTypes.qtParagraph;
    this.Data.Title = "段落文字写在这里...";
  }

   mounted()
    {
      	super.mounted();
        this.initProps();

         console.info("component mounted!");
    }
    //获得答案 参数id：选项id
  getanswer (id:string):object[]
  {
      return [];
  }
  //插入选项
  insert(id: string): void {}
  getQuestionData(): any {
    return this.Data;
  }

  setQuestionData(data: string) {}

  getTitle(): void {}

  setTitle(txt: string): void {}

  GetHtml(html: string): void {
    this.Data.Title = html;
  }
}
</script>
 
<style>
</style>
